<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 排序（Sortable） - 连接列表</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  
  <style>
  #sortable0, #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
  #sortable1 li, #sortable2 li ,li{ margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1" ).sortable({ 
      helper: "clone",
      connectWith: ".connectedSortable",
      items: " li:not(#notMove)"
    });
    $( "#sortable1" ).disableSelection();

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",
        helper: "clone",
        // cursor: "move",
        items: " li:not(#notMove)"
    });
    $( "#sortable2" ).disableSelection();

    $( "#sortable3" ).sortable({
        connectWith: ".connectedSortable",
        helper: "clone",
        cursor: "move"
    });
    $( "#sortable3" ).disableSelection();
  });


  
  $().ready(function(e) {
       //拖拽复制体
       $('.draggable').draggable({
		   helper:"clone",
		   cursor: "move"
		 });

     //释放后
	   $('.connectedSortable').droppable({
			drop:function(event,ui){
                // console.log(event,ui)
				// $(this).children().remove();
				var source = ui.draggable.clone();
				// $('<img/>', {
				// 	src: 'btn_delete.png',
				// 	style:'display:none',
				// 	click: function() {
				// 	  source.remove();
				// 	}
				// }).appendTo(source);

				source.mouseenter(function () {
					$(this).find("img").show();
				});

				source.mouseleave(function () {
					$(this).find("img").hide();
				});

				$(this).append(source);

			}
		});

    });

    $(document).ready(function(){
  $("li").dblclick(function(){
   alert("这个段落被双击。");
   $(this).remove()
  });
  // $("button").click(function(){
  //   var allData = last("sortable1")
  //   console.log(allData)
  // })

  $("button").click(function(){
    var allData = []
    $(".tc").each(function(){
      console.log($(this).attr("id"));
      allData.push(last($(this).attr("id")))
    })
    console.log(allData)
    return allData
  })
});

// 获取ui的所有值
function last(sortTable) {
               var key = []
               $("#"+sortTable).each(function () {
                   //var tmp;

                   $(this).find('li').each(function() {
                     //tmp = $(this).text();
                    if ($(this).css("display")==="none"){
                        // console.log($(this).text())
                    } else {
                      key.push($(this).text());
                    }
                     
                   });

                });
                //遍历该数组可以获取所有值
                // for (var i = 0 ; i < key.length; i++) {
                     //todo
                // }
              return key
          }

  </script>
</head>
<body>
  <ul id="sortable3" class="connectedSortable">
  <li class="ui-state-default draggable">PRO05</li>
  <li class="ui-state-default draggable">PRO06</li>
  </ul>
  
  <button type="button" class="btn btn-success">获取数量值</button>
  
  <ul id="sortable0" class="connectedSortable" style="background-color: black;">
    <li  class="ui-state-default">时间</li>
    <li class="ui-state-default">22/07/11</li>
    <li class="ui-state-default">22/07/18</li>
    <li class="ui-state-default">22/07/25</li>
    <li class="ui-state-default">22/08/01</li>
  </ul>

<ul id="sortable1" class="connectedSortable tc" style="background-color: pink;">
  <li id='notMove' class="ui-state-default">台架01</li>
  <li class="ui-state-default">PRO01</li>
  <li class="ui-state-default">PRO01</li>
  <li class="ui-state-default">PRO02</li>
  <li class="ui-state-default">PRO02</li>
</ul>
 
<ul id="sortable2" class="connectedSortable tc" style="background-color: blue;">
  <li id='notMove' class="ui-state-highlight">台架02</li>
  <li class="ui-state-highlight">PRO03</li>
  <li class="ui-state-highlight">PRO03</li>
  <li class="ui-state-highlight">PRO04</li>
  <li class="ui-state-highlight">PRO04</li>
</ul>
 
 
</body>
</html>